<!--
 * @Author: zhw 443844039@qq.com
 * @Date: 2025-08-02 20:17:58
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-22 21:55:54
 * @Description: 我的评价
-->
<template>
  <div>
    <div class="header">
      <div style="display:flex;justify-content: space-between;align-items: center;">
        <h3>我的评价</h3>
        <div style="font-size:12px;color:#1E62FF" @click="goToDetail()">更多>></div>
      </div>
    </div>
    <div id="evaluationChart" ref="evaluationChart" class="echarts-box"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mineEvaluationCountApi } from '@/api/workbench'
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    goToDetail(){
      this.$router.push('/workbench/TheMyEvaluationDetail');
    },
    initChart() {
      const chart = echarts.init(this.$refs.evaluationChart)
      mineEvaluationCountApi().then(res => {
        let month = [];
        let recordCount = [];
        res.data.evaluation.forEach(item => {
          month.push(item.month+'月')
          recordCount.push(item.recordCount)
        })
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: month
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: recordCount,
              type: 'line'
            }
          ]
        };
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.echarts-box{
  width: 100%;
  height: 400px;
}
</style>